export function handleDragStart(e, refs, state) {
  e.preventDefault();
  state.originX = e.clientX;
  state.originY = e.clientY;
  state.isMouseDown = true;
  state.block = refs.block;

  // 获取左右两边容器
  if (refs.left && refs.right) {
    state.left = refs.left;
    state.right = refs.right;
    state.leftContainerWidth = state.left.offsetWidth;
    state.rightContainerWidth = state.right.offsetWidth;
    state.leftContainerWidthPercent =
      (state.leftContainerWidth / window.innerWidth) * 100;
    state.rightContainerWidthPercent =
      (state.rightContainerWidth / window.innerWidth) * 100;
  }
  // 获取上下两边容器
  if (refs.top && refs.bottom) {
    state.top = refs.top;
    state.bottom = refs.bottom;
    state.topContainerHeight = state.top.offsetHeight;
    state.bottomContainerHeight = state.bottom.offsetHeight;
    state.topContainerHeightPercent =
      (state.topContainerHeight / window.innerHeight) * 100;
    state.bottomContainerHeightPercent =
      (state.bottomContainerHeight / window.innerHeight) * 100;
  }

  // 获取子盒子
  if (refs.childLeft) {
    state.childLeft = refs.childLeft;
    state.childLeftWidth = state.childLeft.offsetWidth;
  }
  if (refs.childTop) {
    state.childTop = refs.childTop;
    state.childTopHeight = state.childTop.offsetHeight;
  }
  state.centerLeft = state.block.offsetLeft;
  state.centerTop = state.block.offsetTop;

  document.onmousemove = (ev) => handleMouseMove(ev, refs, state);
  document.onmouseup = () => handleMouseUp(state);
}

// 鼠标移动
export function handleMouseMove(ev, refs, state) {
  if (!state.isMouseDown) return;

  state.mouseMoveEvent = ev;
  if (!state.animationFrameId) {
    state.animationFrameId = requestAnimationFrame(() =>
      updateSizes(refs, state)
    );
  }
}

function updateSizes(refs, state) {
  state.animationFrameId = null;
  const ev = state.mouseMoveEvent;
  var windowWidth = window.innerWidth;
  var windowHeight = window.innerHeight;

  if (state.leftContainerWidth && state.rightContainerWidth) {
    // 左右
    const moveX = ev.clientX - state.originX;
    const newLeftWidth = state.leftContainerWidth + moveX;
    const newRightWidth = state.rightContainerWidth - moveX;
    if (newLeftWidth >= state.minWidth && newRightWidth >= state.minWidth) {
      state.left.style.width = (newLeftWidth / windowWidth) * 100 + "vw";
      state.right.style.width = (newRightWidth / windowWidth) * 100 + "vw";
      state.block.style.left = state.centerLeft + moveX + "px";
      if (state.childLeft) {
        state.childLeft.style.width =
          ((state.childLeftWidth - moveX) / windowWidth) * 100 + "vw";
      }
    }
  } else if (state.topContainerHeight && state.bottomContainerHeight) {
    // 上下
    const moveY = ev.clientY - state.originY;
    const newTopHeight = state.topContainerHeight + moveY;
    const newBtmHeight = state.bottomContainerHeight - moveY;
    if (newTopHeight >= state.minHeight && newBtmHeight >= state.minHeight) {
      state.top.style.height = (newTopHeight / windowHeight) * 100 + "vh";
      state.bottom.style.height = (newBtmHeight / windowHeight) * 100 + "vh";
      state.block.style.top = state.centerTop + moveY + "px";
      if (state.childTop) {
        state.childTop.style.height =
          ((state.childTopHeight + moveY) / windowHeight) * 100 + "vh";
      }
    }
  }
}
// 鼠标松开
export function handleMouseUp(state) {
  state.isMouseDown = false;
  document.onmousemove = null;
  document.onmouseup = null;
  if (state.animationFrameId) {
    cancelAnimationFrame(state.animationFrameId);
    state.animationFrameId = null;
  }
}
